import * as React from 'react';
import { createRoot } from 'react-dom/client';
// import { jsxDEV } from 'react/jsx-dev-runtime';

// console.log(jsxDEV("h1", {
//     children: ["hello", jsxDEV("span", {
//         style: {
//             color: 'red'
//         },
//         children: "world"
//     })]
// }))

// function FunctionComponent() {
//     console.log('FunctionComponent');
//     const [numbers, setNumbers] = React.useState(new Array(50).fill('A'));

//     React.useEffect(() => {
//         setTimeout(() => { }, 10);
//         setNumbers(pre => pre.map(num => num + 'B'));
//     }, []);

//     return (
//         <button onClick={() => setNumbers(pre => pre.map(num => num + 'C'))}>
//             {numbers.map((num, i) => <span key={i}>{num}</span>)}
//         </button>
//     )
// }
let counter = 0;
let timer;
let bCounter = 0;
let cCounter = 0;
function FunctionComponent() {
    const [numbers, setNumbers] = React.useState(new Array(100).fill('A'));
    const divRef = React.useRef();
    const updateB = (numbers) => new Array(100).fill(numbers[0] + 'B')
    updateB.id = 'updateB' + (bCounter++);
    const updateC = (numbers) => new Array(100).fill(numbers[0] + 'C')
    updateC.id = 'updateC' + (cCounter++);
    React.useEffect(() => {
        timer = setInterval(() => {
            divRef.current.click();
            if (counter++ === 0) {
                setNumbers(updateB)
            }
            divRef.current.click();
            if (counter++ > 10) {
                clearInterval(timer);
            }
        }, 1);
    }, []);
    return (<div ref={divRef} onClick={() => setNumbers(updateC)}>
        {numbers.map((number, index) => <span key={index}>{number}</span>)}</ div>)
}
const element = <FunctionComponent />
const root = createRoot(document.getElementById('root'));
root.render(element);